Angularjs 1 深度解析：组件化编程

头像
CarterLi
    阅读 6 分钟
    5

    转自自己在开源中国的博客：https://my.oschina.net/u/7247...

    angular 1 也要面向组件编程

    前端组件化是前端开发模式中一个不可逆转的趋势，三大主要前端框架 angular 2 react vue 都不约而同的把组件化编程作为自己的一大卖点，angular 1 作为一个历史相对悠久的框架，在私生子 angular 2 的推动下，终于也搭上了组件化编程的末班车，公司里那些老项目终于也有机会体验组件化编程的滋味。

    angular 1 的组件化之路

    angular 1 中类似组件化的编程思想其实很早就有，只不过那时候不叫组件，而叫指令（Directive），指定 restrict: 'E' 后这个指令就与如今组件的用法很相似了。angular 1.5 中，又将指令根据 angular 2 的类似概念加以限制，脱胎为如今的组件（Components）。

    组件的特点

    官方文档列举了组件和指令的不同点。除此之外，一个规范的组件还应符合以下几个特点。

    1. 组件的标签名称必须包含中划线
    2. 组件拥有良好的生命周期
    3. 组件有自包含性
    4. 组件有自封闭性
    5. 组件有可复用性
    6. 组件可以被定制化

    下面依次说明。

    组件的名称规范

    与指令不同，组件必须是一个元素，HTML 对于这一点有特殊的规范。

    HTML 规范把带有中划线的标签留给开发者使用，这样形成的元素又称作自定义元素（Custom Element）。我们虽然没有用到自定义元素的概念，但两者的行为是相似的。我们应该符合这一标准。

    这一点规范对应到 angular 1 中即为：组件名称必须带有驼峰形式。

    例如：

    module.component('dialog', {
    // ...
});

    这是不对的。HTML 规范已经定义了 dialog 这个标准元素，重复使用标签名可能导致我们自定义的组件行为和标准元素的行为混杂到一起，导致奇葩 bug；而且如果这样做也间接导致开发者不能使用原生的 dialog 标签。

    另外，就算现在标准没有定义某个元素，不代表将来不会定义。我们的程序既然跑在浏览器里，就要按规矩办事。这是一种合法的写法：

    module.component('customDialog', {
    // ...
});

    组件的自包含性

    一个设计良好的组件一定有它自己的行为和默认样式。

    默认行为

    默认行为在 angular 1 中用控制器（Controller）定义。

    function CustomDialogController($service) {
    this.someField = 123;
    this.someMethod = function someMethod() {

    }
}
CustomDialogController.$inject = ['$service'];

module.component('customDialog', {
    controller: CustomDialogController,
    template: require('./customDialogTemplate.html'),
});

    因为组件默认启用 controllerAs，所有变量和函数都是绑定到 this 上的，所以你也可以使用 ES2015 的 class 语法来组织代码：

    class CustomDialogController {
    constructor($service) {

    }

    someMethod() {

    }
}
CustomDialogController.$inject = ['$service'];

module.component('customDialog', {
    controller: CustomDialogController,
    template: require('./customDialogTemplate.html'),
});

    这样做有一个问题就是其他函数不能使用 constructor 里注入的服务（Service），只能通过 this 中转一次。我个人的做法是这样：

    class CustomDialogController {
    constructor($service) {
        this.services = { $service };
    }

    someMethod() {
        const { $service } = this.services;
    }
}
// 下略

    建议对于逻辑相对简单的组件的控制器使用 function 定义，复杂的组件使用 class 定义，后者代码的层次要更为清晰易读。

    默认样式

    组件的默认样式直接使用样式表指定。

    custom-dialog {
    display: block;
    // ...
}

    对于所有浏览器不认识的标签，默认都是内联元素（display: inline），对于组件来说通常不是想要的。所以自定义的组件通常至少要有 display: (inline-)block 来改变元素的默认显示方式。

    组件的自封闭性

    自封闭性包含两个方面：数据的自封闭性和样式的自封闭性。

    数据的自封闭性

    angular 1 中，组件自身的 scope 已经是隔离的（isolate），即组件的 scope 不继承自父级 scope（__proto__ 为 null）。除此之外，一个规范的组件不应该直接使用外部的数据，因为这样会破坏组件的可复用性。举几个例子：

    1. $rootScope
    2. $root、$parent（模板中）
    3. 路由参数
    4. localStorage、sessionStorage

    这些数据都应该通过参数绑定 binding 传入。如果组件是路由插件生成，那么可以用 resolve。

    其次，参数绑定不应使用双向绑定 =，规范的组件不应（直接）修改组件外部传入的数据。官方推荐的参数绑定方式有两种

    1. < 单向绑定，绑定可变数据。通常用于给组件传递数据
    2. @ 字符串绑定，绑定字符串。通常用于指定组件行为

    对于单向绑定对象的情况，由于是引用传递，也不应该修改对象内部的属性。

    遇到要向外部传值的情况，推荐使用 ngModel 或 事件绑定（下面会提到）

    样式的自封闭性

    组件间的样式不应该互相干扰，这一点可以简单的通过 scss 的样式嵌套（Nesting）实现：

    custom-dialog {
    display: block;
    // ...

    .title {
        // ...
    }

    .body {
        // ...
    }
}

    这样可以简单的把组件的内置样式表限制在组件内部，从而避免样式外溢。但是这种方法对在组件内部的其他组件不起效果。如果这个组件的模板中还引用了别的组件，或者这个组件被定义为可嵌入的（transclude），那么可以考虑加类名前缀：

    custom-dialog {
    display: block;

    .custom-dialog {
        &-title {
            // ..
        }

        &-body {

        }
    }
}

    组件的可复用性

    组件为复用而生，拥有良好自封闭性的组件必然是可复用的，因为这个组件不受任何外部因素干扰。组件的复用形式包括

    1. 一个页面中使用多次
    2. 在多个页面中使用
    3. ng-repeat
    4. 自己套自己（递归树结构）
    5. 整个源代码拷贝到其他项目中

    等等。一个高度可复用的组件则可以被称为控件，是可以单独投稿 npm 项目库的。

    当然，有些组件（比如单独的页面）可能复用需求没那么高，可以视组件的复用程度不同，从组件的自封闭性和整体代码量做一些取舍。

    组件的定制化

    一个高度可复用的组件一定可以被定制。

    行为的定制化

    通过参数绑定实现组件行为的定制化。例如：

    <custom-dialog x-title="My Dialog" x-modal="true"><!-- 与标签名一样，自定义属性名也应该使用中划线 -->
    <!--content -->
</custom-dialog>
    module.component('customDialog', {
    template: require('./customDialogTemplate.html'),
    transclude: true,
    bindings: {
        title: "@",
        modal: '<',
    },
});

    出于使用方便的考虑，定制用的参数都是可选的，组件内部实现应该给每个定制参数设定默认值。

    样式的定制化

    组件风格定制可以使用 class 判断。

    custom-dialog {
    display: block;
    // ...

    .title {
        font-size: 16px;
        // ...
    }

    &.big {
        .title {
            font-size: 24px;
        }
    }
}

    使用时

    <custom-dialog x-title="My Dialog" class="mydialog big"></custom-dialog>

    深度定制样式比较好的方式是 CSS 属性（CSS Variable，注意不是 SCSS 属性）。

    custom-dialog {
    display: block;
    // ...

    .title {
        font-size: 16px;
        color: var(--dialog-title-color, #333);
        // ...
    }

    &.big {
        .title {
            font-size: 24px;
        }
    }
}

    这时只需要文档中说明标题颜色使用 --dialog-title-color 这个 CSS 变量就好，外部使用不依赖于组件内部 DOM 实现。使用时

    .mydialog {
    --dialog-title-color: red;
}

    组件的生命周期

    从创建至销毁，组件有自己的生命周期（lifecycle），而不像指令那样把 scope 作为生命周期。常用的回调函数如下：

    • $onInit()：组件被初始化时调用。与 constructor 不同，angular 1 确保 $onInit 被调用时组件的所有参数绑定都被正确赋值。
    • $onChanges(changeObj)：组件参数绑定值被改变时调用。用于监听绑定值的变化，初次绑定时也会调用这个函数。
    • $onDestroy()：组件被销毁时调用。用于清理内部资源如 $interval 等。

    这些函数也是绑定在 this 上的。如果 controller 使用 ES2015 的 class 定义方式，可以这么写：

    class CustomDialogController {
    constructor() {}

    onInit() {}

    onChanges({ prop1, prop2 }) {}

    onDestroy() {}
}

    组件间的通信

    组件间通信是一个让很多人头疼的问题，通常有这样 3 种情况

    子 -> 父

    这种情况有标准的实现方式：事件绑定。例如

    class CustomDialogController {
    close($value) {
        this.hide = true;
        this.onClose({ $value });
    }
}

module.component('customDialog', {
    controller: CustomDialogController,
    template: require('./customDialogTemplate.html'),
    bindings: {
        onClose: '&',
    },
});

    使用时：

    <custom-dialog on-close="$ctrl.handleClose(value)"></custom-dialog>

    这种方式也可以用于子组件向父组件传值。

    父 -> 子

    用于触发子组件的某个动作。除了改变某个在子组件内部监听变化的绑定参数值外，行之有效的方式就只有事件广播。

    子组件先监听某个事件

    $scope.$on('custom-dialog--close', () => this.close());

    父组件发送广播

    $scope.$broadcast('custom-dialog--close');

    切记：事件是全局性的。当有组件复用的情况时请使用标识指定接收对象（BUS 模型）；另外最好给事件名添加组件前缀。

    同级组件

    请通过父级组件中转

    子 -> 某全局性组件

    这个显示 Notification 时最常用。遇到这种情况时，可以封装服务（Service）。例如：

    module.component('globalNotification', {
    controller: class GlobalNotificationController {
        constructor(notificationService) {
            notificationService.component = this;
        }

        show(props) {
            // ...
        }
    }
});

module.factory('notify', function NotifyService() {
    return {
        warn(msg) {
            this.show({ type: 'warn', text: msg });
        }
        error(msg) {
            this.show({ type: 'error', text: msg });
        }
    }
});

    方案并不完美。如果有更好的建议欢迎提出。

    结语

    有人可能问既然三大前端框架都是组件化的，何必还要在 angular 1 上实现。殊不知 angular 1 的组件诞生的初衷就是为了减少向 angular 2 迁移的难度。机会总是留给有准备的人，哪天老板大发慈悲表示给你把代码重写的时间，你却看着项目里满屏的 $scope.abc = xxx 不知所措，这岂不是悲剧。。。

    完

    angularjsjavascript
    CarterLi
    1.3k 声望102 粉丝
    « 上一篇
    微信小游戏的前端攻城狮玩法
    下一篇 »
    用 :focus-within 实现纯 CSS 下拉框组件

    引用和评论

    推荐阅读
    头像
    历数 `ref` 四宗罪，现在开始用 `reactive`

    CarterLi赞 1阅读 599

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 8.7k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 25阅读 7.2k评论 8

    头像
    前站 - 前端导航，搜索社区，阅读文章，提升技术

    bestvist赞 25阅读 13.6k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    头像
    100个React最佳实践小技巧

    夕水赞 13阅读 1.3k评论 3

    头像
    开发插件集合

    寒青赞 11阅读 2.9k

    0 条评论
    得票最新